<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>欢迎页</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- Bootstrap-table -->
    <link rel="stylesheet" href="plugins/bootstrap-table/dist/bootstrap-table.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="plugins/jqgrid/ui.jqgrid-bootstrap.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="css/AdminLTE.min.css">

    <style>
        html {
            overflow-x: hidden;
        }

        /* 主体内容区 */
        /*body {
            background-color: #ecf0f5;
        }*/

        .page-wrapper {
            background-color: #ecf0f5;
        }

        p {
            margin: 0;
        }

        b {
            font-weight: 400;
        }

        /* 首页-待办任务 */
        .todo-list > li:hover {
            cursor: pointer;
        }

        .notification-list:before,
        .summary-list:before {
            width: 0;
        }
        .notification-list > li > .timeline-item,
        .summary-list > li > .timeline-body {
            margin-left: 0;
            margin-right: 0;
        }



        /* 首页-项目检索块 */
        .ui-jqgrid .table-bordered, .ui-jqgrid .table-bordered td, .ui-jqgrid .table-bordered th.ui-th-ltr {
            border-left: 0 none !important;
            border-right: 0 none !important;
        }

        /* 首页-系统通知块 */
        .nav-tabs-custom > .nav-tabs > li {
            margin-right: 0;
            width: 33.33333%;
            text-align: center;
        }

        .msg-exigency {
            color: #FF0000;
        }

        /*.msg-normal {
            color: #3D75FF;
        }

        .overtime-mark {
            color: #FF0000;
        }

        .content {
            min-width: 850px;
        }*/

        /*.navbar-static-top {
            min-width: 850px;
        }
        @media (max-width: 767px) {
            .main-header .logo {
                float: left;
            }
            .main-header .logo {
                width: 230px;
            }
            .main-header .navbar {
                width: unset;
                margin-left: 230px;
            }
        }*/

        /*主页系统通知*/
        .nav-tabs.sys-main-msg > li > a {
            padding: 0;
            color: #FF0000;
            border: none;
            border-radius: unset;
            /*border: 1px solid transparent;*/
        }

        .active .msg-title {
            color: #FF0000;
        }

        .msg-title {
            color: #000;
        }

        .sys-main-msg > li > a:focus,
        .sys-main-msg > li > a:hover,
        .sys-main-msg > li > a:visited,
        .sys-main-msg > li > a:active {
            color: #FF0000;
            border: none;
        }

        /*.nav-tabs.sys-main-msg > li > a:hover {
            border: none;
        }*/

        .nav-tabs.sys-main-msg > .active > a {
            border: none;
            /*border: 1px solid transparent;*/
            /*border-bottom: 1px dashed red;*/
        }

        .nav-tabs.sys-main-msg > .active > a:focus,
        .nav-tabs.sys-main-msg > .active > a:hover,
        .nav-tabs.sys-main-msg > .active > a:visited,
        .nav-tabs.sys-main-msg > .active > a:active {
            color: #FF0000;
            border: none;
            background: #f7f7f7
        }

        /* :link v  :visited   :hover  :active*/
        /*主页系统通知-消息页*/
        .list-group-item {
            display: flex;
        }

        .img-item {
            flex: 0 0 60px;
            /*text-align: center;*/
        }

        .img-item .user-icon {
            width: 45px;
            border-radius: 50%;
        }

        .content-item {
            flex: auto;
        }

        /*项目概况页*/
        .project-msg {
            font-size: 16px;
            font-weight: 400;
        }

        .box.box-primary {
            border-top-color: #3c8dbc;
        }
    </style>
</head>
<body class="page-wrapper main-wrapper">

<div id="rrapp" class="" v-cloak style="min-width: 960px;">
    <div class="row">
        <div class="col-md-5">
            <!--area chart-->
            <div class="box box-primary">
                <div class="box-header with-border">
                    <div class="box-title">项目统计 <span>|</span> 共<span id="p-total-num"></span>个项目</div>
                </div>
                <div class="box-body">
                    <div class="chart">
                        <canvas id="pieChart" style="height:250px"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-7">
            <!--area chart-->
            <div class="box box-success">
                <div class="box-header with-border">
                    <div class="box-title">待办任务 <span class="label label-success" id="task-bubble"></span></div>

                    <!--<div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                        </button>
                        <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                    </div>-->
                </div>

                <div class="box-body">
                    <div class="task-list" id="task-list">
                        <!--<p><span></span>代表任务<span>(</span><span>3</span><span>)</span></p>-->
                    <ul class="todo-list" id="todo-list">
                    </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-7">
            <div class="box box-warning">
                <div class="box-header with-border">
                    <div class="box-title">项目检索</div>
                    <div class="box-tools pull-right">
                        <button type="button" id="btn-more" class="btn btn-box-tool" data-widget="collapse"><i
                                class="fa fa-angle-double-right"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body">
                    <table id="jqGrid"></table>
                </div>
            </div>
        </div>

        <div class="col-md-5">
            <div>
                <!-- Custom Tabs -->
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#tab_1" data-toggle="tab">留言消息 <span class="label bg-blue" id="notice-bubble"></span></a></li>
                        <li><a href="#tab_2" data-toggle="tab">系统通知 <span class="label bg-blue" id="msg-bubble"></span></a></li>
                        <li><a href="#tab_3" data-toggle="tab">会议通知 <span class="label bg-red" id="meeting-bubble"></span></a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="tab_1">
                            <div class="box-body chat" id="chat-box">
                                <div class="item" v-for="(item, index) in msgList">
                                    <img src="./img/user-local.png" alt="user image" class="">

                                    <div class="message">
                                        <a href="#" class="name">
                                            <small class="text-muted pull-right"><i class="fa fa-clock-o"></i> {{item.sentData}}</small>
                                            {{item.sentUserName}}
                                        </a>
                                        <p style="min-height: 20px">{{item.messageContent}}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /.tab-pane -->
                        <div class="tab-pane" id="tab_2">

                            <div class="box-body notification" id="notification-box">
                                <ul class="timeline notification-list">
                                    <li v-for="(item, index) in notificationList">
                                        <div class="timeline-item">
                                            <span class="time"><i class="fa fa-clock-o"></i> {{ item.operateTime }}</span>

                                            <h3 class="timeline-header"><a href="#">{{ item.projectName }}</a> <!--sent you an email--></h3>

                                            <div class="timeline-body">
                                                {{ item.notificationContent }}
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!-- /.tab-pane -->
                        <div class="tab-pane" id="tab_3">
                            <div class="box-body summary" id="summary-box">
                                <ul class="timeline summary-list">
                                    <li v-for="(item, index) in meetingList">
                                        <div class="timeline-body">
                                            <i class="fa fa-clock-o"></i>
                                            <a @click="saveOrUpdate(item.id,item.projectId)" :data-id="item.id" href="#" class="time">
                                                <font color="red">
                                                {{ item.conferenceTime }}
                                                </font>&nbsp;
                                                <font color="black">
                                                    您将有一个会议参加，别忘了出席！
                                                </font>
                                            </a>

                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!-- /.tab-pane -->
                    </div>
                    <!-- /.tab-content -->
                </div>
            </div>
        </div>
    </div>
</div>

<script src="libs/jquery.min.js"></script>
<script src="plugins/layer/layer.js"></script>
<script src="libs/bootstrap.min.js"></script>
<script src="libs/vue.min.js"></script>
<script src="plugins/jqgrid/grid.locale-cn.js"></script>
<script src="plugins/jqgrid/jquery.jqGrid.min.js"></script>
<script src="plugins/chart/Chart.min.js"></script>
<!-- Slimscroll -->
<script src="plugins/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="js/common.js"></script>
<script src="js/main.js"></script>
</body>
</html>